<template>
  <div class="main" :style="layoutStyle">
    <div v-for="element in layouts" :key="element.id">
      <template v-if="element.component !== 'SearchContainer'">
        <component
          :is="layoutItemSet[element.component] || 'div'"
          :class="['dragIgnoreFromClassName']"
          v-bind="element.componentProps"
          :id="element.id"
          :layoutItemSet="layoutItemSet"
          :layoutBasicSettings="yibiaoData.style"
          :componentStyle="element?.componentStyle"
          :widget="element"
          scene="preview"
        />
      </template>
    </div>
    <div class="main-searchBtn" v-if="searchLayout.length">
      <i :class="['GRUSJCFXPT-iconfont-didaima', 'icon-chaxun']"></i>
    </div>
  </div>
</template>

<script setup>
// 预览页面
import { computed, ref, defineProps } from "vue";
import { YYBJSON } from "../json/data";
import { layoutItemMap } from "../components/LayoutItemMobile/index";

// 模拟的数据
const yibiaoData = ref(YYBJSON);

const layouts = computed(() => yibiaoData.value.layout);

const layoutItemSet = ref(layoutItemMap.map);

// 判断是否存在搜索容器
const searchLayout = computed(() => {
  const _index = layouts.value.findIndex(
    (item) => item.component === "SearchContainer"
  );
  if (_index !== -1 && layouts.value[_index]?.childrenLayouts) {
    return layouts.value[_index]?.childrenLayouts;
  }
  return [];
});

// 仪表板样式
const layoutStyle = computed(() => {
  if (Object.values(yibiaoData.value.style).length === 0) return {};
  let backgroundSrc;
  let backgroundColor;
  const insideMargin = yibiaoData.value.style.insideMargin + "px";
  // 兼容老数据 type
  const _model =
    yibiaoData.value.style?.background?.model ||
    yibiaoData.value.style?.background?.type;
  if (_model === "color") {
    // 选择颜色
    if (yibiaoData.value.style?.background?.color) {
      backgroundColor = yibiaoData.value.style?.background?.color;
    }
  } else if (_model === "custom") {
    // 自定义
    if (yibiaoData.value.style?.background?.image?.url) {
      backgroundSrc = yibiaoData.value.style.background.image.url;
    }
  }

  return {
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    // TODO: 待右侧上传做好后，移除
    backgroundImage: `url(${backgroundSrc})`,
    backgroundColor,
    padding: insideMargin,
  };
});
</script>

<style lang="scss" scoped>
.main {
  width: 375px;
  margin: 0 auto;
  background: #f9fafc;
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
  height: 94%;
  overflow-y: auto;
  position: relative;
  .main-searchBtn {
    position: absolute;
    bottom: var(--md-spacing-3);
    right: var(--md-spacing-3);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #fff;
    background: #1989fa;
  }
}
</style>
